<template>
  <div class = "menu">
    <template v-for = "item in routes">
      <sub-menu
          :base-path = "item.path"
          :item = "item"
          :key = "item.path"
          v-if = "item.children && item.children.length > 1"
      />
      <menu-item
          :key = "item.path"
          :path = "item.path"
          :title = "item.name"
          v-else
      />
    </template>
  </div>
</template>

<script>
import router from '../../router/router'
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'

export default {
  name: 'Menu',
  components: {MenuItem, SubMenu},
  props: {},
  data() {
  },
  methods: {},
  computed: {
    routes() {
      return router
    }
  }
}
</script>

<style scoped>
.menu {
  user-select: none;
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 5px 5px 5px rgba(204, 204, 204, 0.23);
  background: white;
  overflow-x: hidden;
}
</style>